<!doctype html>
<html ng-app="myapp">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="script-tags-for-development.js"></script>
<script>
var app = app || angular.module('myapp', ['ngMap']);
app.controller('MyCtrl', function($timeout, NgMap) {
  var vm = this;
  NgMap.getMap().then(function(map) {
      vm.map = map;
    });

  vm.stores = {
    foo: { position:[41, -87], items: [1,2,3,4]},
    bar:{ position:[41, -83], items: [5,6,7,8]}
  };

  vm.googleMapsUrl = 'https://maps.google.com/maps/api/js';
  vm.pauseLoading=true;
  console.log("Starting a timer to wait for 2 seconds before the map will start loading");

  $timeout(function() {
    console.debug("Showing the map. The google maps api should load now.");
    vm.pauseLoading=false;
  }, 2000);

  vm.showStore = function(evt, id) {
    vm.store = vm.stores[id];
    vm.map.showInfoWindow('foo', this);
  };
});
</script>
</head>
<body ng-controller="MyCtrl as vm">

  <div ng-if="vm.pauseLoading">
    <h1>Waiting for 2 seconds to lazy load the maps API via map-lazy-load</h1>
  </div>
  <div ng-if="!vm.pauseLoading">
    <h1>Lazy Load Activated: the map should be visible</h1>
    <p>This screen demonstrates the lazy loading of the google maps api.
    Check the network tab of the dev tools and the maps api should start
    loading 2 seconds after the page is loaded. This demo also shows the
    use of the map-lazy-load-params attribute to allow specification
    of map API key via an angular/javascript variable.</p>

    <div map-lazy-load="https://maps.google.com/maps/api/js"
      map-lazy-load-params="{{vm.googleMapsUrl}}" >
      <ng-map default-style="true" center="41,-87" zoom="3">

        <info-window id="foo">
          <div ng-non-bindable="">
            Lat/Lng: {{anchor.getPosition().lat()}}/
                     {{anchor.getPosition().lng()}}<br/>
            <ul>
              <li ng-repeat='item in vm.store.items'>{{item}}</li>
            </ul>
          </div>
        </info-window>

        <marker ng-repeat="(id, store) in vm.stores" id="{{id}}"
          position="{{store.position}}"
          on-click="vm.showStore(event, id)"
        ></marker>

        <info-window id="bar">
          <div ng-non-bindable="">
            Lat: {{anchor.getPosition().lat()}}<br/>
            Lng: {{anchor.getPosition().lng()}}<br/>
          </div>
        </info-window>

        <marker position="41, -79" on-click="vm.map.showInfoWindow('bar')">
        </marker>
      </ng-map>
    </div>
  </div>
</body>
</html>
